<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js"></script>
    <link rel="stylesheet" href="./one.css">
</head>
<body>
    <div class="all">
        <div class="top">
            <img src="./images/big.jpg" class="big">
            <img src="./images/big1.png" class="big1">
            <img src="./images/big2.png" class="big2">
            <p class="top-p">原1号店于2020年7月22日正式升级为1号会员店，通过全场自营、精选商品模式，
                致力于为用户提供品质升级、超值天天低价、便捷省心的会员制购物体验。</p>
            <div class="top-app">
                <img src="./images/iPhone.png" class="iphone">
                <span>下载APP</span>
                <img src="./images/erweima.png" class="top-ma">
            </div>
            <div class="top-bottom">
                <span class="alert">一号店公告</span>
            </div>
        </div>
        <div class="al">
            <div class="al-div">
                <p>尊敬的1号店用户</p>
                <p>1号店将进行业务调整，调整后针对您账号中的“礼品卡”、“账户余额”处理，我们通知如下：</p>
                <p>1、1号店将于2020年6月22日至7月22日进行业务调整系统升级以及数据维护（以下简称“调整期”），调整期将暂停绑定、使用“礼品卡”，调整期如有变更我们将另行公告通知；</p>
                <p>2、调整期后您可通过1号店平台绑定您相应的京东账号来对您1号店账户中原有的礼品卡、账户余额进行转移，转移后您可在京东上正常购物使用；</p>
                <p>3、本次“礼品卡”业务调整范围不包含2012年3月以前生成的1号店礼品卡。</p>
                <p>1号店“账户余额”、“礼品卡”系统升级以及数据维护时间调整为6月22日至8月31日，敬请理解。</p>
                <p>尊敬的用户，您好，很抱歉通知您，礼品卡迁移功能将延期上线，我们将于上线前7日提前告知。
                    感谢您对1号店的支持与理解。</p>
                    <button class="al-button">我知道了</button>
            </div>
        </div>
        <div class="middle">
            <div class="middle-1">
                <img src="./images/jingxuan.png">
                <p>自营全站商品 以严格选品标准 精挑细选3000+最优好货</p>
            </div>
            <ul class="middle-2">
                <li> <img src="./images/6-1.png" class="m2-img" img1-src="./images/6-11.png" img2-src="./images/6-111.png" > </li>
                <li> <img src="./images/6-2.png" class="m2-img" img1-src="./images/6-22.png" img2-src="./images/6-222.png" > </li>
                <li> <img src="./images/6-3.png" class="m2-img" img1-src="./images/6-33.png" img2-src="./images/6-333.png" > </li>
                <li> <img src="./images/6-4.png" class="m2-img" img1-src="./images/6-44.png" img2-src="./images/6-444.png" > </li>
                <li> <img src="./images/6-5.png" class="m2-img" img1-src="./images/6-55.png" img2-src="./images/6-555.png" > </li>
                <li> <img src="./images/6-6.png" class="m2-img" img1-src="./images/6-66.png" img2-src="./images/6-666.png" > </li>
            </ul>
            <div class="clear"></div>
            <!-- 轮播 -->
            <div class="middle-3">
                <img src="./images/left.png" class="left1">
                <div class="move1">
                    <img src="./images/6-11.png" class="img6-11">
                    <img src="./images/6-111.png" class="img6-111">
                </div>
                <img src="./images/right.png" class="right1">
            </div>
            <div class="middle-4">
                <img src="./images/wusuo.png">
                <p>入会专享超值特权，天天低价</p>
            </div>
            <ul class="middle-5">
                <li> <img src="./images/3-1.png" class="m5-img"> 
                    <img src="./images/3-11.png" class="m5-img1">
                    <p>超值低价</p>
                    <p>入会即享</p>
                </li>
                <li class="li-2"> <img src="./images/3-2.png" class="m5-img"> 
                    <img src="./images/3-22.png" class="m5-img1">
                    <p>超值低价</p>
                    <p>入会即享</p>
                </li>
                <li> <img src="./images/3-3.png" class="m5-img">
                    <img src="./images/3-33.png" class="m5-img1">
                    <p>超值低价</p>
                    <p>入会即享</p>
                </li>
            </ul>
            <div class="clear"></div>
            <div class="middle-6">
                <img src="./images/fangxin.png">
                <p>售后无忧 客服物流时刻保障</p>
            </div>
            <div class="middle-7">
                <img src="./images/headbig.png" >
            </div>
            <div class="middle-8">
                <ul>
                    <li>
                        <span class="span-1">扫码下载APP开启品质生活</span>
                        <span class="span-2">一期仅开放部分城市，敬请期待。</span>
                    </li>
                    <li>
                        <img src="./images/erweima.png" >
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="foot"> 
                <ul class="ul3">
                    <li><img src="./images/4-1.png">精选好货</li>
                    <li><img src="./images/4-2.png">精选好货</li>
                    <li><img src="./images/4-3.png">精选好货</li>
                    <li><img src="./images/4-4.png">精选好货</li>
                </ul>
                <div class="clear"></div>
                <div class="boxFoot">
                <p>沪ICP备16050468号-2 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：4006063968 | 沪B2-20170039 | 沪公网安备 31011302006998号 | 增值电信业务经营许可证</p>
                <p>Copyright 1号会员店 2007-2021， All Rights Reserved</p>
                <div class="footer">
                    <img src="./images/bottom1.png">
                    <img src="./images/bottom2.png">
                    <img src="./images/bottom3.png">
                    <img src="./images/bottom4.png">
                    <img id="small" src="./images/small.png">
                    <img src="./images/bottom5.png">
                    <img src="./images/bottom6.jpg">
                    
                </div>
                </div>
           </div>
    
        </div>
        <div class="right">
            <ul>
                <li  class="li1">联系客服
                    <div class="right-1">
                        <p>客服联系电话</p>
                        <p class="p2">411-051-1254</p>
                    </div>
                </li>
                <li >下载APP</li>
                <li class="li3"><img src="./images/erweima.png" ></li>
                <li class="li4">一期仅开放部分城市，敬请期待。</li>
                <li class="li5 #top">TOP</li>
            </ul>
        </div>
    </div>
    
</body>
<script>
    $(function(){
        //公告文字轮播
        var news = $('.alert');
        var arr=['一号店公告','啦啦啦啦','哈哈哈哈','嘿嘿嘿嘿'];
        var timer=null;
        var i = 0;
        var timer = setInterval(function(){
            i++;
            if(i==arr.length){
                i = 0;
            };
            news.text(arr[i])
        },3000)
        //鼠标经过下载APP二维码出现
        $('.top-app').mouseenter(function(){
            $(this).children('.top-ma').css('display','inline-block');
        });
        $('.top-app').mouseleave(function(){
            $(this).children('.top-ma').css('display','none');
        });
        //鼠标移入箭头变色
        $('.left1').mouseenter(function(){
            $(this).attr('src','./images/left2.png')
        })
        $('.right1').mouseenter(function(){
            $(this).attr('src','./images/right2.png')
        })
        $('.left1').mouseleave(function(){
            $(this).attr('src','./images/left.png')
        })
        $('.right1').mouseleave(function(){
            $(this).attr('src','./images/right.png')
        })
        //鼠标点击进行轮播
        var j=-1;
        var lis3 = $('.m2-img')
         //右箭头
        $('.right1').click(function(){  
            var lis1 = $('.middle-2').children('li').children('img');
            var lis2 = $(this).siblings('.move1').children('img');  
            // console.log(lis1[1]);
            j++;
            if(j==lis1.length){
                j=0;
            }
                // console.log(lis3[j]);  
                //便历所有m2-img使其所有'style','width:80%'
                for(var i=0;i<lis1.length;i++){
                    lis3[i].setAttribute('style','width:80%');
                }
                //再给当前j：'style','width:100%'
                lis3[j].setAttribute('style','width:100%');
                var src1 = lis1[j].getAttribute('img1-src');
                // console.log(src1);    
                var src2 = lis1[j].getAttribute('img2-src');
                lis2[0].setAttribute('src',src1);
                lis2[1].setAttribute('src',src2);      
        })
    //    左箭头
        $('.left1').click(function(){
            var lis1 = $('.middle-2').children('li').children('img');
            var lis2 = $(this).siblings('.move1').children('img');
            // console.log(lis1[1]);
            j--; 
            if(j==-1){
                j=lis1.length-1;
            }
            for(var i=0;i<lis1.length;i++){
                    lis3[i].setAttribute('style','width:80%');
                }
                lis3[j].setAttribute('style','width:100%');
                var src1 = lis1[j].getAttribute('img1-src');
                // console.log(src1);    
                var src2 = lis1[j].getAttribute('img2-src');
                lis2[0].setAttribute('src',src1);
                lis2[1].setAttribute('src',src2);
           
        })
        //点击一号店公告弹出蒙版
        $('.alert').click(function(){
            $(this).parents('.top').siblings('.al').css('display','block');
        });
        $('.al-button').click(function(){
            $(this).parents('.al').css('display','none');
        });
        //鼠标经过图片放大图片
        $('.m2-img').mouseenter(function(){
            $(this).css('width','100%');
            var src1 = $(this).attr('img1-src');
            var src = $(this).attr('img2-src');
            // console.log(src);   
            $('.img6-11').attr('src',src1);
            $('.img6-111').attr('src',src);
        });
        $('.m2-img').mouseleave(function(){
            $(this).css('width','80%');
        });
        //返回顶部
        $('.li5').click(function(){
            $(window).scrollTop('top','0');
        });
        //联系客服鼠标移入
        $('.li1').mouseenter(function(){
            $(this).children('.right-1').css('display','inline-block');
        });
        $('.li1').mouseleave(function(){
            $(this).children('.right-1').css('display','none');
        });
    })
</script>
</html>